<template>
	<template v-if="type == 'list'">
		<block v-for="goodsItem in goodsList" :key="goodsItem.id">
			<view class="goods-item goods-list w-[340rpx] h-[480rpx] mt-[20rpx] flex bg-white"
				@click="goPage(goodsItem.id)">
				<u-image :src="goodsItem.image" width="340" height="340"></u-image>
				<view class="goods-name truncate pl-[20rpx] pt-[20rpx]">
					{{ goodsItem.name }}
				</view>
				<view class="pl-[20rpx] mt-[10rpx]">
					<price :price="goodsItem?.price" :desc="goodsItem.unit || goodsItem?.unit_name"></price>
				</view>
			</view>
		</block>
	</template>

	<template v-if="type == 'row'">
		<!-- 旧版 -->
		<!-- <block v-for="goodsItem in goodsList" :key="goodsItem.id">
            <view
                class="goods-item w-[200rpx] h-[310rpx] mr-[49rpx] flex bg-white"
                @click="goPage(goodsItem.id)"
            >
                <u-image :src="goodsItem.image" width="200" height="200"></u-image>
                <view class="goods-name truncate pt-[20rpx]">
                    {{ goodsItem.name }}
                </view>
                <view class="mt-[10rpx]">
                    <price
                        :price="goodsItem?.price"
                        :desc="goodsItem.unit || goodsItem?.unit_name"
                    ></price>
                </view>
            </view>
        </block> -->

		<!-- 新版 -->
		<view style="overflow: hidden;">
            
			<view v-for="goodsItem in goodsList" :key="goodsItem.id" class="goodsList_view" >
				<view class="view_center" @click="goPage(goodsItem.id)">
					<view class="" style="width:100%;height:100%">
						<img :src="goodsItem.image" alt="" srcset="" class="img_cla"/>
					</view>
					<view class="view_text">
						<view class="padding_left">
							{{ goodsItem.name }}
						</view>
						<div style="display: flex;margin-top: 5px;">
                            <view class="padding_left" style="width:calc(100% - 110rpx - 20rpx);">
                                <price :price="goodsItem?.price" :desc="goodsItem.unit || goodsItem?.unit_name"></price>
                            </view>
                            <view class=""  style="margin-right: 10rpx;">
                                <div style="font-size:12px;display: flex;
    align-items: center;
    justify-content: center;color: #fff;border-radius: 50rpx;width: 120rpx;height: 48rpx;background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/0ae10729-f13c-42d1-b140-9d0c8b8c647b.png');background-size: 100% 100%;">
                                    立即预约
                                </div>
                            </view>
                        </div>
					</view>
				</view>
			</view>
		</view>
        
	</template>
</template>

<script lang="ts" setup>
	import Price from '@/components/price/index.vue'

	/** Props Start **/
	const props = withDefaults(
		defineProps<{
			type : string // 列表类型
			goodsList ?: any // 商品数据
		}>(),
		{
			type: 'list',
			goodsList: []
		}
	)
	/** Props End **/

	/** Methods Start **/
	/**
	 * @param { string } url
	 * @return { void }
	 * @description 跳转到商品
	 */
	const goPage = (id : number | string) => {
		uni.navigateTo({
			url: `/pages/goods/index?id=${id}`
		})
	}
	/** Methods End **/
</script>

<style lang="scss" scoped>
	.goods-item {
		display: inline-block;
		overflow: hidden;
		border-radius: 8rpx;

		.goods-name {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 28rpx;
			color: #222222;
		}
	}

	.goods-list {
		margin-right: 20rpx;
	}

	.goods-list:nth-child(2n) {
		margin-right: 0;
	}

	.goodsList_view {
		width: 46%;
		margin:2%;
		float: left;
		// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
		//border:1px solid #ccc;
		border-radius: 10px;
		overflow: hidden;
		height:260px;
		background:#fff;
		.view_text{
			padding:5px 0px;
		 
			height:75px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
		}
		.view_center{
			width:100%;
			background:#fff;
			 height:calc(100% - 75px);
			.img_cla{
				height:calc(100%);
                width:100%;
                background-size: 100% 100% !important;
				// width:100%;
			}
		}
		.padding_left{
			padding:0 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;//显示的最大行数
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;//强行截断单词
            line-height: 28rpx;//每行的高度
            white-space: initial;
		}
	}
</style>